<template>
     <div class="homepage">
         
          <div class="Search">
              <input type="text">
              <span>搜索</span>
          </div>
          

          <div class="list">
              <div class="list-nav">
                   <div class="nav" v-for="(item,index) in list" :key="index"  :class="{active:currentIndex == index}">{{item}}</div>
              </div>
             
              <div class="block" v-for="(item,index) in Arr" :key="index">
              <div><img :src="item.picUrl" alt=""></div>
                <div class="weng">
                    <span>售价：{{item.wmPoiScore}}</span>
                    <span> {{item.name}}</span>
                 </div>  
                </div>
          </div>
     </div>
</template>

<script>
import {shop_list} from '../../../utils/api'
export default {
    data(){
         return{
            currentIndex : 0,
             Arr:[],
             list:["综合排序","距离最近","销量最高","筛选"],
            

         }
    },
       mounted(){
           shop_list().then((res)=>{
            this.Arr = res.data.list;
              console.log(res)
           })
       }
}
</script>

<style lang="scss" scoped>
     *{
          margin: 0;
          padding: 0;
      }

      .Search{
          width: 100%;
          display: flex;
          justify-content: space-around;
          margin-top: 10px;
      }
      .Search input{
          width: 70%;
          height: 30px;
          border-radius: 10px;
          background-color: #f5f5f5;
          border: none;
          outline: none;

          
      } 
      .Search span{
          
          display: inline-block;
          height: 30px;
          background-color: aquamarine;
          border-radius: 5px;
          color: #c4c1c1;
      }
      .Swiper{
          width: 90%;
          height: 100px;
          background-image: url(../../../pic.png);
          background-size: contain;
          margin-left: 19px;
          margin: 10px 19px;
      }

      .list-nav{
       width: 100%;
       height: 30px;
       display: flex;
       /* justify-content: center; */
       justify-content: space-around;
   }
   .nav{
       height: 30px;
   }

   .block{
       width: 90%;
       height: 100px;
       display: flex;
       /* margin-top: 20px; */
       padding: 20px 0;
       margin-left: 20px;
       box-sizing: border-box;
       /* justify-content: center; */
   }
   .block img{
       width: 100px;
   }
   .weng{
       margin-left: 20px;
   }
   .weng span{
       display: block;
       /* flex-direction: row; */
   }
   .weng span:last-child{
       /* margin-top: 60px; */
       color: rgb(212, 160, 95);
   }
   .list .nav{
       padding: 10px;
       /* margin: 4px 5px; */
       text-align: center;
       color: #999;

   }

   .active{
       color: red;
   }
</style>